/*
 * @Descripttion : 视频集
 * @Author       : QianFox Team
 * @Date         : 2022-09-13 10:37:12
 * @LastEditors  : QianFox Team
 * @LastEditTime : 2024-08-07 09:28:22
 */

import { videoManager } from './videoManager';
import { dialog } from './dialog';

function VideoSort() {
    this.CONTAINER = '.foxui-videos';
    this.DRAG = '.foxui-drag';
    this.CARD = '.foxui-videos-card';
    this.LIST = '.foxui-videos-list';
    this.LIST_ITEM = '.foxui-videos-list > .foxui-videos-item';
    this.ITEM = '.foxui-videos-item';
    this.HANDLE = '.foxui-videos-handle';
    this.DELETE_HANDLE = '.foxui-videos .foxui-videos-list .foxui-videos-item .delete';
    this.REPLACE_HANDLE = '.foxui-videos .foxui-videos-item .replace';
    this.PLAY_HANDLE = '.foxui-videos .foxui-videos-item .play';

    this.$this = null; // 当前视频集的点击目标 jQuery 对象
}

/**
 * @description: 初始化
 * @return {*}
 * @Date: 2022-09-13 11:26:23
 */
VideoSort.prototype._init = function () {
    this._judgeVideoCount();
    this._bindDeleteVideo();
    this._bindAddVideo();
    this._bindReplaceVideo();
    this._addCustomer();
    this._bindPlay();
};

/**
 * @description: 判断视频数量是否显示添加图片按钮
 * @param {*} container         容器节点（不传时为初始化）
 * @return {*}
 * @Date: 2022-09-13 11:05:27
 */
VideoSort.prototype._judgeVideoCount = function ($container) {
    let that = this;
    $container = $container || $(this.CONTAINER);
    $container.each(function () {
        let $this = $(this),
            $handle = $this.find(that.HANDLE),
            count = $this.attr('data-count') || 1,
            len = $this.find(that.LIST_ITEM).length || 0;

        if (count > 0) {
            len < count ? $handle.show() : $handle.hide();
        }
    });
};

/**
 * @description: 绑定删除视频
 * @return {*}
 * @Date: 2022-09-13 11:18:28
 */
VideoSort.prototype._bindDeleteVideo = function () {
    let that = this;
    $(document).on('click', that.DELETE_HANDLE, function () {
        let $this = $(this),
            $container = $this.closest(that.CONTAINER),
            $item = $this.closest(that.ITEM);

        $item.removeClass('foxui-animate-fadeInDown').addClass('foxui-animate-slideOutUp');
        setTimeout(() => {
            $item.remove();
            // 判断图片数量
            that._judgeVideoCount($container);
        }, 300);
    });
};

/**
 * @description: 绑定添加视频
 * @return {*}
 * @Date: 2022-09-13 11:19:50
 */
VideoSort.prototype._bindAddVideo = function () {
    let that = this;
    $(document).on('click', this.HANDLE, function () {
        videoManager.show(this);
        that.$this = $(this);
    });
};

/**
 * @description: 绑定替换视频
 * @return {*}
 * @Date: 2022-09-13 11:23:13
 */
VideoSort.prototype._bindReplaceVideo = function () {
    let that = this;
    $(document).on('click', this.REPLACE_HANDLE, function () {
        videoManager.show(this);
        that.$this = $(this);
    });
};

/**
 * @description: 绑定播放
 * @return {*}
 * @Date: 2022-09-13 15:36:30
 */
VideoSort.prototype._bindPlay = function () {
    let that = this;
    $(document).on('click', this.PLAY_HANDLE, function () {
        let videoUrl = $(this).siblings('img').attr('data-url');
        dialog({
            title: '播放视频',
            content: that._playHtml(videoUrl),
            width: '860px',
        });
    });
};

/**
 * @description: 更新视频
 * @param {*} choosedUrl
 * @param {*} choosedId
 * @param {*} choosedImgUrl
 * @param {*} choosedDuration
 * @param {*} target
 * @return {*}
 * @Date: 2022-09-13 13:54:12
 */
VideoSort.prototype._updateVideo = function ({
    choosedUrl,
    choosedId,
    choosedImgUrl,
    choosedTitle,
    choosedDuration,
    target,
}) {
    // 如果没点击 foxui-videos，则无需更新
    if (!this.$this) {
        return false;
    }
    // 点击 foxui-videos，但中间退出，又点击别的节点，也无需更新
    if (target !== this.$this[0]) {
        return false;
    }
    // 更新节点
    let $this = this.$this,
        $container = $this.closest(this.CONTAINER);
    // 判断是追加还是替换
    let isAppend = $this.hasClass('foxui-videos-handle');
    if (isAppend) {
        $this.before(
            this._videoItemHtml(choosedUrl, choosedId, choosedImgUrl, choosedTitle, choosedDuration)
        );
        // 判断图片数量
        this._judgeVideoCount($container);
    } else {
        $this.siblings('img').attr({ 'data-id': '', 'data-url': choosedUrl, src: choosedImgUrl });
        $this.siblings('.duration').text(choosedDuration);
    }
    // 修正订阅者（触发别的组件时，也可能会出现添加视频）
    this.$this = null;
};

VideoSort.prototype._videoItemHtml = function (
    choosedUrl,
    choosedId,
    choosedImgUrl,
    choosedTitle,
    choosedDuration
) {
    let $this = this.$this,
        isDrag = $this.closest(this.CONTAINER).is(this.DRAG);
    if (isDrag) {
        return [
            '<li class="foxui-videos-item foxui-drag-item foxui-animate-fadeInDown">',
            '<div class="content">',
            `<img data-id="${choosedId || ''}" data-url="${choosedUrl || ''}" src="${
                choosedImgUrl || ''
            }" />`,
            `<span class="duration">${choosedDuration || ''}</span>`,
            '<div class="play foxui-drag-handle">',
            '<i class="foxui-icon-kaishi-f"></i>',
            '</div>',
            '<span class="replace">替换</span>',
            '<i class="foxui-icon-cuowu-f delete"></i>',
            '</div>',
            `<input type="text" class="foxui-videos-title" placeholder="请输入标题" value="${
                choosedTitle || ''
            }" />`,
            '</li>',
        ].join('');
    } else {
        return [
            '<li class="foxui-videos-item foxui-animate-fadeInDown">',
            '<div class="content">',
            `<img data-id="${choosedId || ''}" data-url="${choosedUrl || ''}" src="${
                choosedImgUrl || ''
            }" />`,
            `<span class="duration">${choosedDuration || ''}</span>`,
            '<div class="play">',
            '<i class="foxui-icon-kaishi-f"></i>',
            '</div>',
            '<span class="replace">替换</span>',
            '<i class="foxui-icon-cuowu-f delete"></i>',
            '</div>',
            `<input type="text" class="foxui-videos-title" placeholder="请输入标题" value="${
                choosedTitle || ''
            }" />`,
            '</li>',
        ].join('');
    }
};

VideoSort.prototype._playHtml = function (videoUrl) {
    return [
        '<div class="foxui-videos-play__container">',
        '<video controls autoplay>',
        `<source src="${videoUrl}" type="video/mp4">`,
        '</video>',
        '</div>',
    ].join('');
};

/**
 * @description: 添加观察者
 * @return {*}
 * @Date: 2022-09-13 11:29:13
 */
VideoSort.prototype._addCustomer = function () {
    videoManager._onConfirm(this._updateVideo.bind(this));
};

let videoSort = new VideoSort();

export { videoSort };
